<template>
  <div>
     <label>性：<input type="text" placeholder="请输入姓氏" v-model="tname"></label>
     <label>名：<input type="text" placeholder="请输入名字" v-model="ttname"></label>
     <hr>
      <label>性名：<input type="text" placeholder="请输入名字" v-model="Name"></label>
      <label>性名：<input type="text" placeholder="请输入名字" v-model="tttname"></label>
  </div>
    <!-- 数据计算 -->
</template>

<script>
export default {
    name:'text2',
    data(){
        return{
            tname:'',
            ttname:'',
            //被watch监听改变
            tttname:'',
        }
    },
    //配置计算属性
    computed:{
        Name(){
           return this.tname+'.'+this.ttname
        }
    },
    //配置watch
    watch:{
        tname(val){
            console.log(`watch监视到tname发生改变${val}`)
            this.tttname=val+'.'+this.ttname
        },
         ttname(val){
            console.log(`watch监视到ttname发生改变${val}`)
             this.tttname=this.tname+'.'+val
        }
    }
    
}
</script>

<style>

</style>